<template>
  <view>
    <!-- <view class="newsbox">
      <u-icon
        name="arrow-left"
        color="#333333"
        size="44rpx"
        class="icon-left"
        @click="backFn"
      ></u-icon>
      <view class="toubucss">
        {{ title }}
      </view>
    <view class="kefuimg" @click="gotoStore">
        <view class="kefuname"> 进店 </view>
      </view> -->
    <!--    </view> -->
    <view class="content" @touchstart="hideDrawer">
      <scroll-view
        class="msg-list"
        scroll-y="true"
        :scroll-with-animation="scrollAnimation"
        :scroll-top="scrollTop"
        :scroll-into-view="scrollToView"
        @scrolltoupper="loadHistory"
        upper-threshold="50"
      >
        <!-- 加载历史数据waitingUI -->
        <!-- <view class="loading">
					<view class="spinner">
						<view class="rect1"></view>
						<view class="rect2"></view>
						<view class="rect3"></view>
						<view class="rect4"></view>
						<view class="rect5"></view>
					</view>
				</view> -->
        <view
          class="row"
          v-for="(item, index) in msgList"
          :key="index"
          :id="item.ID"
        >
          <!-- 用户消息 -->
          <block>
            <!-- 自己发出的消息 -->
            <view class="my" v-if="item.flow == 'out'">
              <!-- 左-消息 -->
              <view class="left">
                <!-- 文字消息 -->
                <view v-if="item.type == TIM.TYPES.MSG_TEXT" class="bubble">
                  <rich-text
                    :nodes="nodesFliter(item.payload.text)"
                  ></rich-text>
                </view>
                <!-- 图片消息 -->
                <view
                  v-else-if="
                    item.type == 'TIMCustomElem' &&
                    item.payload.data === 'chatFile'
                  "
                  class="bubble"
                  @click="previewImage(item.payload.description)"
                >
                  <image
                    :src="item.payload.description"
                    mode="aspectFit"
                  ></image>
                </view>
                <!-- 订单链接 -->
                <view
                  v-else-if="
                    item.type == 'TIMCustomElem' &&
                    item.payload.data === 'orderInfo'
                  "
                  @click="clickFn(item.payload.extension, false)"
                  class="bubble"
                >
                  <tim-card
                    :info="JSON.parse(item.payload.description)"
                  ></tim-card>
                </view>
                <!-- 语音消息 -->
                <!--                #ifndef H5-->
                <view
                  v-if="
                    item.type == 'TIMCustomElem' &&
                    item.payload.data === 'record'
                  "
                  class="bubble"
                  @click="playVoice(item.payload.description, item.ID)"
                >
                  <view
                    class="flex flex-jc-fe"
                    :style="`width:${90 + 4 * item.payload.extension}rpx;`"
                  >
                    <text class="pr-10">{{ item.payload.extension }}s</text>
                    <i-icon
                      icon="iconyuyin2"
                      type="single"
                      size="40rpx"
                      color="#666"
                    ></i-icon>
                  </view>
                </view>
                <!--                #endif-->
              </view>
              <!-- 右-头像 -->
              <view class="right">
                <image
                  v-if="userInfo.img !== '' && userInfo.img !== null"
                  :src="userInfo.img"
                ></image>
                <image
                  v-else
                  src=""
                ></image>
              </view>
            </view>
            <!-- 别人发出的消息 -->
            <view class="other" v-else>
              <!-- 左-头像 -->
              <view class="left">
                <image
                  v-if="toUserInfo.img !== '' && toUserInfo.img !== null"
                  :src="toUserInfo.img"
                ></image>
                <image
                  v-else
                  src=""
                ></image>
              </view>
              <!-- 右-用户名称-时间-消息 -->
              <view class="right">
                <view class="username">
                  <view class="name">{{ toUserInfo.user }}</view>
                  <view class="time">{{ timeFliter(item.time) }}</view>
                </view>

                <!-- 文字消息 -->
                <view v-if="item.type == TIM.TYPES.MSG_TEXT" class="bubble">
                  <rich-text
                    :nodes="nodesFliter(item.payload.text)"
                  ></rich-text>
                </view>

                <!-- 图片消息 -->
                <view
                  v-else-if="
                    item.type == 'TIMCustomElem' &&
                    item.payload.data === 'chatFile'
                  "
                  class="bubble"
                  @click="previewImage(item.payload.description)"
                >
                  <image
                    :src="item.payload.description"
                    mode="aspectFit"
                  ></image>
                </view>

                <!-- 订单链接 -->
                <view
                  v-else-if="
                    item.type == 'TIMCustomElem' &&
                    item.payload.data === 'orderInfo'
                  "
                  @click="clickFn(item.payload.extension, true)"
                  class="bubble"
                >
                  <tim-card
                    :info="JSON.parse(item.payload.description)"
                  ></tim-card>
                </view>

                <!-- 语音消息 -->
                <!--                 #ifndef H5-->
                <view
                  v-if="
                    item.type == 'TIMCustomElem' &&
                    item.payload.data === 'record'
                  "
                  class="bubble"
                  @click="playVoice(item.payload.description, item.ID)"
                >
                  <view
                    class="flex"
                    :style="`width:${90 + 4 * item.payload.extension}rpx;`"
                  >
                    <text class="pl-10">{{ item.payload.extension }}s</text>
                    <i-icon
                      icon="iconsaying"
                      type="single"
                      size="40rpx"
                      color="#666"
                    ></i-icon>
                  </view>
                </view>
                <!--                #endif-->
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>

    <!-- 抽屉栏 -->
    <view
      class="popup-layer"
      :class="popupLayerClass"
      @touchmove.stop.prevent="discard"
    >
      <!-- 表情 -->
      <swiper
        class="emoji-swiper"
        :class="{ hidden: hideEmoji }"
        indicator-dots="true"
        duration="150"
      >
        <swiper-item v-for="(page, pid) in emojiList" :key="pid">
          <view v-for="(em, eid) in page" :key="eid" @tap="addEmoji(em)">
            <image mode="widthFix" :src="'/static/img/emoji/' + em.url"></image>
          </view>
        </swiper-item>
      </swiper>
      <!-- 更多功能 相册-拍照-红包 -->
      <view class="more-layer" :class="{ hidden: hideMore }">
        <view class="footer" v-if="footerList.length > 0">
          发送
          <view class="item-wrapper" v-for="(item, i) in footerList" :key="i">
            <view class="item" @click="gotoOrderList(i)">
              <i-icon
                :icon="item.icon"
                type="single"
                size="24rpx"
                color="#FDD421"
              ></i-icon>
              <view class="item-name">{{ item.name }}</view>
            </view>
          </view>
        </view>

        <view class="list">
          <view class="box" @tap="chooseImage">
            <view class="icon tupian2"></view>
          </view>
          <!-- <view class="box" @tap="camera">
						<view class="icon paizhao"></view>
					</view> -->
          <!-- <view class="box" @tap="handRedEnvelopes">
						<view class="icon hongbao"></view>
					</view> -->
        </view>
      </view>
    </view>
    <!-- 底部输入栏 -->
    <view
      class="input-box"
      :class="popupLayerClass"
      @touchmove.stop.prevent="discard"
    >
      <!-- H5下不能录音，输入栏布局改动一下 -->
      <!-- #ifndef H5 -->
      <view class="voice">
        <view
          class="icon icon-voice"
          :class="isVoice ? 'jianpan' : 'yuyin'"
          @tap="switchVoice"
        ></view>
      </view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="more" @tap="showMore">
        <view class="icon add"></view>
      </view>
      <!-- #endif -->
      <view class="textbox">
        <view
          class="voice-mode"
          :class="[isVoice ? '' : 'hidden', recording ? 'recording' : '']"
          @touchstart="voiceBegin"
          @touchmove.stop.prevent="voiceIng"
          @touchend="voiceEnd"
          @touchcancel="voiceCancel"
          >{{ voiceTis }}</view
        >
        <view class="text-mode" :class="isVoice ? 'hidden' : ''">
          <view class="box">
            <textarea
              auto-height="true"
              v-model="textMsg"
              @focus="textareaFocus"
              cursor-spacing="10"
            />
          </view>
          <view class="em" @tap="chooseEmoji">
            <view class="icon biaoqing"></view>
          </view>
        </view>
      </view>
      <!-- #ifndef H5 -->
      <view class="more" @tap="showMore">
        <view class="icon add"></view>
      </view>
      <!-- #endif -->
      <view class="send" :class="isVoice ? 'hidden' : ''" @tap="sendText">
        <view class="btn">发送</view>
      </view>
    </view>
    <!-- 录音UI效果 -->
    <view class="record" :class="recording ? '' : 'hidden'">
      <view class="ing" :class="willStop ? 'hidden' : ''"
        ><view class="icon luyin2"></view
      ></view>
      <view class="cancel" :class="willStop ? '' : 'hidden'"
        ><view class="icon chehui"></view
      ></view>
      <view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
    </view>
    <!-- 红包弹窗 -->
    <view class="windows" :class="windowsState">
      <!-- 遮罩层 -->
      <view
        class="mask"
        @touchmove.stop.prevent="discard"
        @tap="closeRedEnvelope"
      ></view>
      <view class="layer" @touchmove.stop.prevent="discard">
        <view class="open-redenvelope">
          <view class="top">
            <view class="close-btn">
              <view class="icon close" @tap="closeRedEnvelope"></view>
            </view>
            <image src="/static/img/im/face/face_1.jpg"></image>
          </view>
          <view class="from">来自{{ redenvelopeData.from }}</view>
          <view class="blessing">{{ redenvelopeData.blessing }}</view>
          <view class="money">{{ redenvelopeData.money }}</view>
          <view class="showDetails" @tap="toDetails(redenvelopeData.rid)">
            查看领取详情 <view class="icon to"></view>
          </view>
        </view>
      </view>
    </view>

    <tim-card
      class="info-card"
      v-show="showCard"
      :isMsg="true"
      :info="orderInfo"
      @sendCard="sendCustomMsg"
      @close="closeOrder"
    ></tim-card>
  </view>
</template>
<script src="./contactSeller.js"></script>
<style src="./contactSeller.scss" lang="scss"></style>
